<template>
  <view class="root">
    <view class="inner-root">
      <view class="c-wrapper">
        <view class="c-item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
          <image class="icon-img" :src="baseImgUrl + item.icon" />
          <view class="icon-text">
            {{item.text}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    navTo
  } from '../utils/util';

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        list: [{
            url: '/itemRegistration/list',
            text: '易丢失物品',
            icon: 'm-1.png'
          },
          {
            url: '/multipleRealInformation/vehicleReporting/index',
            text: '车辆',
            icon: 'm-2.png'
          },
          {
            url: '/multipleRealInformation/dogs/index',
            text: '犬类',
            icon: 'm-3.png'
          },
          {
            url: '/multipleRealInformation/aircraft/index',
            text: '低慢小飞行器',
            icon: 'm-4.png'
          },
          {
            url: '/multipleRealInformation/cuttingTool/index',
            text: '刀具',
            icon: 'm-5.png'
          },
          {
            url: '/multipleRealInformation/slingshot/index',
            text: '弓箭弹弓',
            icon: 'm-6.png'
          },
          {
            url: '/multipleRealInformation/gasTank/index',
            text: '煤气罐',
            icon: 'm-7.png'
          },
          {
            url: '/multipleRealInformation/farmTools/index',
            text: '农机具',
            icon: 'm-8.png'
          },
          {
            url: '/multipleRealInformation/cattle/index',
            text: '耕牛',
            icon: 'm-9.png'
          }
        ]
      }
    },
    methods: {
      handleItem(item) {
        navTo({
          url: item.url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    padding: 10rpx 16rpx;
    background: #F9F9F9;

    .inner-root {
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      width: 100%;
      height: 100%;

      .c-wrapper {
        display: flex;
        flex-wrap: wrap;
        padding-top: 35rpx;

        .c-item {
          width: 25%;
          text-align: center;
          margin-bottom: 52rpx;

          .icon-img {
            width: 88rpx;
            height: 88rpx;
            margin-bottom: 18rpx;
          }

          .icon-text {
            font-weight: 500;
            font-size: 24rpx;
            color: #000000;
          }
        }
      }
    }
  }
</style>